<html>
<head>
	<title>CanesCalendar :: Schedule</title>
	
	<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
	<!--[if lt IE 8]>
	  <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
	<![endif]--></code></pre>

	<link href="css/main.css" title="External CSS" rel="stylesheet" type="text/css" media="screen">

	<style type="text/css"><!--
	    .field-table tr {
	        height: 0;
	        background-color: white;
	    }
	
		#course-selector {
			font-size: 10pt;
		}

		#course-selector select {
			font-size: 10pt;
			margin-left: 5px;
			margin-right: 10px;
		}

		#course-selector input {
			font-size: 10pt;
			margin-left: 5px;	
			margin-right: 10px;	
		}

		#courses {
			border: 1px solid #BBBCBD;
			margin: 0;
			padding: 0;
		}

		#courses li {
			background: #fff;
			padding: 4px 0px;
			font-size: 10pt;
	    	list-style-type: none;
		}
		
		#courses li:first-child + li {
		    background: #fff;
		}
		
		#courses li:nth-child(odd) {
			background: #f3f6fa;
		}		

		#courses li:first-child {
			font-size: 9pt;
			font-weight: bold;
			text-align: center;
			border-bottom: 1px solid #BBBCBD;
			background: #CCE1F8;
			height: 15px;
			padding-top: 2px;
			
            background-image: -moz-linear-gradient(100% 100% 90deg, #dcdcdc, #fafafa);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#dcdcdc));

			text-shadow: #fff 1px 1px;
		}
		
		#courses li:first-child + li {
			border-bottom: 1px solid #BBBCBD;
		}
		
		#empty-courses {
			text-align: center;
			font-size: 9pt !important;
		}
	
		.delete-button {
			float: left;
			border: 0px none transparent;	
			background-color: transparent;
			background-image: url(images/deleteButtons.png);
			height: 14px;
			width: 14px;	
			margin-top: 3px;
			margin-right: 10px;
			margin-left: 10px;		
		}

		.delete-button:active {
			background-position: 28px 0px;
		}

		.delete-button:hover {
			background-position: 14px 0px;
		}

		#add-button {
			display: inline;
			border: 0px none transparent;	
			background-color: transparent;
			background-image: url(images/addButtons.png);
			height: 14px;
			width: 14px;
		}

		#add-button:active {
			background-position: 28px 0px;
		}

		#add-button:hover {
			background-position: 14px 0px;
		}
		
		table.controls {
		    padding: 0;
		    margin: 0;
		    width: 0;
		    margin-left: auto;
		    margin-right: auto;
		}
		
		table.controls input, 
		table.controls select {
		    width: 60px;
		}
		
		table.longer input, 
		table.longer select {
		    width: 100px;
		}		
		
		
		table.controls td:first-child {
		    padding-right: 8px;
		}
		
		table.controls td:last-child {
		    text-align: left;		    
		}		
		
		table.controls th, td, caption {
		    padding: 0;
		    text-align: right;
		    border: 0px solid black;
		}
		
		table.controls tbody tr:nth-child(even) td,
        table.controls tbody tr.even td {
          background: transparent;
        }
        
		table.controls tr:last-child td:last-child {
		    text-align: right;
		}
	--></style>
	
	<link href="js/timePicker/timePicker.css" title="External CSS" rel="stylesheet" type="text/css" media="screen">
    <script type='text/javascript' src='js/jquery-week-calendar/libs/jquery-1.4.4.min.js'></script>
    <script type="text/javascript" src="js/timePicker/jquery.timePicker.js"></script>
    <script type="text/javascript">
    jQuery(function() {
        // 02.00 AM - 03.30 PM, 15 minutes steps.
        $("#startTime, #endTime").timePicker({
            startTime: "08:00",
            endTime: "20:00",
            show24Hours: false,
            separator:':',
            step: 15});

        // Validate.
        $("#startTime, #endTime").change(function() {
            var startTime = $.timePicker("#startTime");
            var endTime = $.timePicker("#endTime");
            if(startTime.getTime() > endTime.getTime()) {
                $(this).addClass("timeError");
            }
            else {
                $('#startTime').removeClass("timeError");
                $('#endTime').removeClass("timeError");
            }
        });
    });
    </script>
</head>

<body>
    <div class="container">
		{% include "navbar.html" %}
		
		<p class="errorText">{{ error_message }}</p>		
			
		<div class="prepend-3 span-5">	
			<ul id="courses">
				<li>Possible Courses</li>
				<li>
    				<form action="/schedule" method="post" autocomplete="off">
    				    <table class="controls">
    				        <tr>
    				            <td>Department:</td>
    				            <td>
                					<select name="department">					
                					{% for dept in departments %}
                						<option value="{{ dept }}">{{ dept }}
                					{% endfor %}
                					</select>
                				</td>
                			</tr>
            			
                			<tr>
                			    <td>Number:</td>
                			    <td><input class="input-box" type="text" size="1" name="coursenum"></td>
                			</tr>
            			
                			<tr>
                			    <td></td>
                			    <td><button id="add-button"></button></td>
                			</tr>
                		</table>
    					<input type="hidden" name="action" value="addCourse">
    				</form>	
        		</li>				    
				{% if courses %}
					{% for course in courses %}
						<li>
							<form action="/schedule" method="post">
								<input type="hidden" name="action" value="deleteCourse">
								<input type="hidden" name="key" value="{{ course.key }}">
								<input type="submit" class="delete-button" value="">
							</form>
							{{ course.name }}
						</li>
					{% endfor %}
				{% else %}
					<li id="empty-courses">No courses have been added.</li>
				{% endif %}				
			</ul>
		</div>
		
		<div class="prepend-1 span-5">
			<ul id="courses">
				<li>Busy Times</li>
				<li>
            		<form action="/schedule" method="post">					    
        			    <table class="controls longer">
            				<tr>
            				    <td>Day:</td>
            				    <td>
                    				<select name="day">
                    				    <option value="-1">Everyday
                    					<option value="0">Monday
                    					<option value="1">Tuesday
                                        <option value="2">Wednesday
                                        <option value="3">Thursday
                                        <option value="4">Friday
                    				</select>
                    			</td>
                			</tr>
                			
                			<tr>	
                				<td>Start:</td>
                		        <td><input type="text" name="startTime" id="startTime" size="10" value="8:00 AM"></td>
                		    </tr>
                		    
                		    <tr>
                		        <td>End:</td>
                		        <td><input type="text" name="endTime" id="endTime" size="8" value="11:00 AM"></td>
                		    </tr>
                		    
                		    <tr>
                		        <td></td>
                		        <td><button id="add-button"></button></td>
                		    </tr>
                        </table>
                        
                        <input type="hidden" name="action" value="addConstraint">
                    </form>
            	</li>				    
				{% if constraints %}
					{% for constraint in constraints %}
						<li>
							<form action="/schedule" method="post">
								<input type="hidden" name="action" value="deleteConstraint">
								<input type="hidden" name="id" value="{{ constraint.id }}">
								<input type="submit" class="delete-button" value="">
							</form>
							{{ constraint.name }}
						</li>
					{% endfor %}
				{% else %}
					<li id="empty-courses">No times have been added.</li>
				{% endif %}				
			</ul>    		
		</div>
		
		<div class="prepend-1 span-6">
			<ul id="courses">
			    <li>Schedule</li>
			
    			 	
        			<li>
        			    <table class="controls">
        			        <tr>
        			            <td>
        			                <form action="/schedule_results" method="post" autocomplete="off">
        			                Course load:
        			            </td>
        			            <td>
        			                <input type="text" name="numcourses" size="1" value="5">
        			            </td>
        			        </tr>
        			    </table>
        			</li>		
			    
    			    <li style="padding-left: 8px">	    
    		            <input type="submit" value="Find Schedules">
            		</li>
    			</form>
    		</ul>
		</div>
	</div>
</body>
</html>